<template>
	<view class="center">
		<u-navbar title="不吃香菜的消息" placeholder='true' autoBack='true'></u-navbar>
		<view class="message-box">
			<view class="" v-for="(item,index) in maslist" :key="index">
				<view class="message-right" v-if="item.user==1">
					<view class="right-text">
						{{item.masg}}
					</view>
					<view class="right-user">
						<image src="" class="imga" mode=""></image>
					</view>
				</view>
				<view class="message-left" v-if="item.user==2">
					<view class="left-user">
						<image src="" class="imga" mode=""></image>
					</view>
					<view class="left-text">
						{{item.masg}}
					</view>

				</view>
			</view>
		</view>
		<view class="fixed-bottom">
			<u--input placeholder="请输入内容" border="surround" shape='circle' v-model="value"></u--input>
			<view style="padding-left: 20rpx;" @click="onsende">
				<u-icon name="checkmark" color="#2979ff" size="36"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				value: '',
				maslist: [{
						user: 1,
						masg: '生命是一段美好的旅程，希望你是与我同行的人'
					},
					{
						user: 2,
						masg: '生命是一段美好的旅程，希望你是与我同行的人'
					},
				]
			};
		},

		computed: {
			...mapGetters(['imgBaseUrl'])
		},
		methods: {
			onsende() {

				if (!this.value) {
					return this.$message('请输入信息')
				}
				let data = {
					user: 1,
					masg: this.value
				}
				this.maslist.push(data)
				this.value = ''
			}

		}
	};
</script>
<style lang="scss">
	@import '@/styles/mixin.scss';

	.center {
		min-height: 100%;
		background-color: #f5f5f5;

		.message-box {
			padding: 20rpx;

			.message-right {
				padding-top: 20rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.right-text {
					padding: 20rpx;
					background-color: #9feceb;
					border-radius: 15rpx;
					max-width: 80%;
					font-size: 32rpx
				}

				.right-user {
					padding-left: 20rpx;

					.imga {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						background-color: black;
					}
				}

			}

			.message-left {
				padding-top: 20rpx;
				display: flex;
				// justify-content: flex-end;
				align-items: center;

				.left-text {
					padding: 20rpx;
					background-color: #9feceb;
					border-radius: 15rpx;
					max-width: 80%;
					font-size: 32rpx
				}

				.left-user {
					padding-right: 20rpx;

					.imga {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						background-color: black;
					}
				}

			}

		}

		.fixed-bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			/* 使div宽度覆盖整个屏幕 */
			background-color: #f0f0f0;
			/* 设置背景颜色以便于观察 */
			padding: 10px;
			padding-bottom: 40rpx;
			/* 添加一些内边距 */
			display: flex;
		}
	}
</style>